<template>
  <el-card class="content-card" shadow="hover">
    <template #header>
      <div class="card-header">
        <span>API文档 - 基础配置</span>
      </div>
    </template>

    <div class="content-container">
      <div class="api-content">
        <div class="section" id="environment">
          <div class="section-header"><h2>环境配置</h2></div>
          <p class="intro-text">
            在开始使用API之前，您需要配置正确的环境设置。我们提供了多个环境供您选择：
          </p>
          <div class="env-grid">
            <div class="env-item">
              <div class="env-badge dev">开发环境</div>
              <h3>Development</h3>
              <p class="env-url">https://dev-api.example.com</p>
              <p>用于开发和测试，数据会定期清理</p>
            </div>
            <div class="env-item">
              <div class="env-badge staging">测试环境</div>
              <h3>Staging</h3>
              <p class="env-url">https://staging-api.example.com</p>
              <p>用于预发布测试，接近生产环境配置</p>
            </div>
            <div class="env-item">
              <div class="env-badge prod">生产环境</div>
              <h3>Production</h3>
              <p class="env-url">https://api.example.com</p>
              <p>正式生产环境，请谨慎操作</p>
            </div>
          </div>
        </div>

        <div class="section" id="api-key">
          <div class="section-header">
            <h2>API密钥配置</h2>
            <el-button
              type="primary"
              size="small"
              :icon="CopyDocument"
              @click="copyCode(apiKeyExample)"
              class="copy-btn"
            >
              复制代码
            </el-button>
          </div>
          <p>API密钥是访问我们服务的重要凭证，请妥善保管：</p>
          <MonacoEditor
            style="height: 160px; border-radius: 6px; overflow: hidden"
            v-model="apiKeyExample"
            language="javascript"
            :options="{
              readOnly: true,
              minimap: { enabled: false },
              height: '160px',
            }"
          />
          <div class="security-tips">
            <h4>🔒 安全提示</h4>
            <ul>
              <li>不要在客户端代码中硬编码API密钥</li>
              <li>使用环境变量存储敏感信息</li>
              <li>定期轮换API密钥</li>
              <li>为不同环境使用不同的密钥</li>
            </ul>
          </div>
        </div>

        <div class="section" id="request-config">
          <div class="section-header">
            <h2>请求配置</h2>
            <el-button
              type="primary"
              size="small"
              :icon="CopyDocument"
              @click="copyCode(requestConfigExample)"
              class="copy-btn"
            >
              复制代码
            </el-button>
          </div>
          <p>推荐的请求配置设置：</p>
          <MonacoEditor
            style="height: 220px; border-radius: 6px; overflow: hidden"
            v-model="requestConfigExample"
            language="javascript"
            :options="{
              readOnly: true,
              minimap: { enabled: false },
              height: '220px',
            }"
          />
        </div>

        <div class="section" id="rate-limits">
          <div class="section-header"><h2>速率限制</h2></div>
          <p>为了保证服务质量，我们对API请求实施了速率限制：</p>
          <div class="rate-limits-table">
            <el-table :data="rateLimits" border stripe>
              <el-table-column prop="plan" label="计划类型" width="120" />
              <el-table-column prop="requests" label="请求次数" width="120" />
              <el-table-column prop="period" label="时间窗口" width="120" />
              <el-table-column prop="burst" label="突发限制" width="120" />
              <el-table-column prop="description" label="说明" show-overflow-tooltip />
            </el-table>
          </div>
          <div class="rate-limit-tips">
            <p><strong>注意：</strong>当达到速率限制时，API会返回HTTP 429状态码。建议在客户端实现指数退避重试机制。</p>
          </div>
        </div>

        <div class="section" id="sdk-config">
          <div class="section-header">
            <h2>SDK配置示例</h2>
            <el-button
              type="primary"
              size="small"
              :icon="CopyDocument"
              @click="copyCode(sdkConfigExample)"
              class="copy-btn"
            >
              复制代码
            </el-button>
          </div>
          <p>如果您使用我们提供的SDK，可以参考以下配置：</p>
          <MonacoEditor
            style="height: 200px; border-radius: 6px; overflow: hidden"
            v-model="sdkConfigExample"
            language="javascript"
            :options="{
              readOnly: true,
              minimap: { enabled: false },
              height: '200px',
            }"
          />
        </div>

        <div class="section" id="troubleshooting">
          <div class="section-header"><h2>常见问题</h2></div>
          <div class="faq-list">
            <div class="faq-item">
              <h4>Q: 如何获取API密钥？</h4>
              <p>A: 请联系系统管理员或通过开发者控制台申请API密钥。</p>
            </div>
            <div class="faq-item">
              <h4>Q: API密钥过期了怎么办？</h4>
              <p>A: 请重新申请新的API密钥，并更新您的应用程序配置。</p>
            </div>
            <div class="faq-item">
              <h4>Q: 如何处理网络超时？</h4>
              <p>A: 建议设置合理的超时时间（推荐30秒），并实现重试机制。</p>
            </div>
            <div class="faq-item">
              <h4>Q: 可以在多个应用中使用同一个API密钥吗？</h4>
              <p>A: 建议为每个应用申请独立的API密钥，便于管理和安全控制。</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧悬浮目录 -->
      <div class="toc">
        <div class="toc-title">目录</div>
        <div class="toc-item" @click="scrollToSection('environment')">
          环境配置
        </div>
        <div class="toc-item" @click="scrollToSection('api-key')">
          API密钥配置
        </div>
        <div class="toc-item" @click="scrollToSection('request-config')">
          请求配置
        </div>
        <div class="toc-item" @click="scrollToSection('rate-limits')">
          速率限制
        </div>
        <div class="toc-item" @click="scrollToSection('sdk-config')">
          SDK配置示例
        </div>
        <div class="toc-item" @click="scrollToSection('troubleshooting')">
          常见问题
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { CopyDocument } from "@element-plus/icons-vue";
import MonacoEditor from "@/components/MonacoEditor.vue";

const apiKeyExample = ref(`// 环境变量配置
process.env.API_KEY = 'your_api_key_here';
process.env.API_BASE_URL = 'https://api.example.com';

// 在代码中使用
const apiKey = process.env.API_KEY;
const baseUrl = process.env.API_BASE_URL;`);

const requestConfigExample = ref(`// 推荐的axios配置
const apiClient = axios.create({
  baseURL: process.env.API_BASE_URL,
  timeout: 30000, // 30秒超时
  headers: {
    'Authorization': \`Bearer \${process.env.API_KEY}\`,
    'Content-Type': 'application/json',
    'User-Agent': 'YourApp/1.0.0'
  }
});`);

const sdkConfigExample = ref(`// SDK初始化配置
import { ApiClient } from '@yourcompany/api-sdk';

const client = new ApiClient({
  apiKey: process.env.API_KEY,
  baseUrl: process.env.API_BASE_URL,
  timeout: 30000,
  retryAttempts: 3,
  retryDelay: 1000
});`);

const rateLimits = ref([
  {
    plan: '免费版',
    requests: '1,000',
    period: '每小时',
    burst: '100',
    description: '适合个人开发者和小型项目'
  },
  {
    plan: '基础版',
    requests: '10,000',
    period: '每小时',
    burst: '500',
    description: '适合中小型企业应用'
  },
  {
    plan: '专业版',
    requests: '100,000',
    period: '每小时',
    burst: '2,000',
    description: '适合大型企业和高并发应用'
  },
  {
    plan: '企业版',
    requests: '无限制',
    period: '-',
    burst: '10,000',
    description: '定制化解决方案，联系销售团队'
  }
]);

const scrollToSection = (sectionId) => {
  const element = document.getElementById(sectionId);
  if (element) {
    element.scrollIntoView({ behavior: "smooth" });
  }
};

const copyCode = async (code) => {
  if (!code) {
    ElMessage.warning("没有可复制的代码");
    return;
  }

  try {
    await navigator.clipboard.writeText(code);
    ElMessage.success("代码已复制到剪贴板");
  } catch (err) {
    // 降级方案：使用传统的复制方法
    const textArea = document.createElement("textarea");
    textArea.value = code;
    document.body.appendChild(textArea);
    textArea.select();
    try {
      document.execCommand("copy");
      ElMessage.success("代码已复制到剪贴板");
    } catch (fallbackErr) {
      ElMessage.error("复制失败，请手动复制");
    }
    document.body.removeChild(textArea);
  }
};
</script>

<style scoped>
.content-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.card-header {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  color: #303133;
}

:deep(.el-card__body) {
  padding: 0;
  height: calc(100% - 60px);
  overflow-y: auto;
  background: #ffffff;
}

.content-container {
  min-height: 100%;
  padding: 30px;
  padding-right: 280px;
  background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
}

.api-content {
  max-width: 1000px;
  margin: 0 auto;
  line-height: 1.8;
  color: #4a5568;
}

.section {
  margin-bottom: 40px;
  padding: 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section h2 {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #409eff;
  color: #303133;
  font-size: 20px;
  font-weight: 600;
  position: relative;
  flex: 1;
}

.section h2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 50px;
  height: 2px;
  background: #409eff;
  border-radius: 1px;
}

.copy-btn {
  margin-left: 16px;
  border-radius: 6px;
  font-size: 12px;
  padding: 6px 12px;
  background: #409eff;
  border-color: #409eff;
  transition: all 0.3s ease;
}

.copy-btn:hover {
  background: #337ecc;
  border-color: #337ecc;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.intro-text {
  font-size: 16px;
  line-height: 1.8;
  color: #4a5568;
  margin-bottom: 20px;
}

.env-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.env-item {
  background: #ffffff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  position: relative;
}

.env-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.env-badge {
  position: absolute;
  top: -8px;
  right: 16px;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  color: white;
}

.env-badge.dev {
  background: #67c23a;
}

.env-badge.staging {
  background: #e6a23c;
}

.env-badge.prod {
  background: #f56c6c;
}

.env-item h3 {
  margin: 0 0 8px 0;
  color: #2d3748;
  font-size: 18px;
  font-weight: 600;
}

.env-url {
  font-family: 'Courier New', monospace;
  background: #f1f3f4;
  padding: 8px 12px;
  border-radius: 6px;
  margin: 12px 0;
  font-size: 14px;
  color: #409eff;
  word-break: break-all;
}

.env-item p:last-child {
  margin: 0;
  color: #4a5568;
  font-size: 14px;
  line-height: 1.6;
}

.security-tips {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
}

.security-tips h4 {
  margin: 0 0 12px 0;
  color: #856404;
  font-size: 16px;
}

.security-tips ul {
  margin: 0;
  padding-left: 20px;
}

.security-tips li {
  color: #856404;
  margin-bottom: 8px;
  line-height: 1.6;
}

.rate-limits-table {
  margin: 20px 0;
}

.rate-limit-tips {
  background: #e7f3ff;
  border: 1px solid #b3d8ff;
  border-radius: 8px;
  padding: 16px;
  margin-top: 20px;
}

.rate-limit-tips p {
  margin: 0;
  color: #0066cc;
  font-size: 14px;
  line-height: 1.6;
}

.faq-list {
  margin-top: 20px;
}

.faq-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.faq-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.faq-item h4 {
  margin: 0 0 8px 0;
  color: #2d3748;
  font-size: 16px;
  font-weight: 600;
}

.faq-item p {
  margin: 0;
  color: #4a5568;
  font-size: 14px;
  line-height: 1.6;
}

/* 右侧悬浮目录样式 */
.toc {
  position: fixed;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  border: 1px solid #e4e7ed;
  min-width: 200px;
}

.toc-title {
  font-weight: 700;
  margin-bottom: 15px;
  color: #2d3748;
  font-size: 18px;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 2px solid #e2e8f0;
}

.toc-item {
  padding: 12px 16px;
  cursor: pointer;
  color: #4a5568;
  transition: all 0.3s ease;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 4px;
  border-left: 3px solid transparent;
  position: relative;
}

.toc-item:hover {
  color: #409eff;
  background: #ecf5ff;
  border-left-color: #409eff;
  transform: translateX(4px);
}

.toc-item:active {
  transform: translateX(2px);
}

/* Element Plus 组件样式优化 */
:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

:deep(.el-table th) {
  background: #409eff;
  color: white;
  font-weight: 600;
  border: none;
}

:deep(.el-table td) {
  border-color: #e2e8f0;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background: #f8f9fa;
}

/* Monaco Editor 样式优化 */
:deep(.monaco-editor) {
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .content-container {
    padding-right: 30px;
  }

  .toc {
    display: none;
  }
}

@media (max-width: 768px) {
  .content-container {
    padding: 20px 15px;
  }

  .section {
    padding: 20px 15px;
    margin-bottom: 25px;
  }

  .section h2 {
    font-size: 18px;
  }

  .card-header {
    font-size: 16px;
    padding: 15px;
  }

  .env-grid {
    grid-template-columns: 1fr;
  }
}

/* 滚动条样式 */
:deep(.el-card__body)::-webkit-scrollbar {
  width: 6px;
}

:deep(.el-card__body)::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

:deep(.el-card__body)::-webkit-scrollbar-thumb {
  background: #409eff;
  border-radius: 3px;
}

:deep(.el-card__body)::-webkit-scrollbar-thumb:hover {
  background: #337ecc;
}
</style>